<template>
  <div id="app">
    <van-nav-bar title="城市列表" class="title">
      <template #left>
        <van-icon name="arrow-left" color="#ffffff" @click="$router.go(-1)" />
      </template>
    </van-nav-bar>
    <div id="container"></div>
  </div>
</template>

<script>
import { shouHousesMap } from '@/api/city'

export default {
  name: 'map-page',
  data() {
    return {
      housesMapList: []
    }
  },
  async mounted() {
    // 请求数据
    const { body } = await shouHousesMap()
    this.housesMapList = body

    const MyMap = window.BMap
    const map = new MyMap.Map('container') // 创建Map实例
    map.centerAndZoom('上海', 11) // 设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
    // 添加地图类型控件
    map.addControl(new MyMap.NavigationControl())
    map.addControl(new MyMap.ScaleControl())
    // 添加文本标注
    body.forEach((item) => {
      const str = `<div><p>${item.label}</p><p>${item.count}套</p><div/>`
      const label = new MyMap.Label()
      // 设置文本标注样式
      label.setStyle({
        position: 'absolute',
        display: 'inline-block',
        width: '70px',
        height: '70px',
        borderRadius: '50%',
        fontSize: '14px',
        background: '#23bb77',
        textAlign: 'center',
        color: '#ffffff',
        border: '2px solid hsla(0,0%,100%,.8)',
        lineHeight: '2',
        cursor: 'pointer'
      })
      label.setContent(str)
      // 设置标标注地理位置
      const opt = new MyMap.Point(item.coord.longitude, item.coord.latitude)
      label.setPosition(opt)
      // 绑定点击事件
      label.addEventListener('click', () => {
        const num = map.getZoom() + 2
        map.centerAndZoom(opt, num)
        map.clearOverlays()
        window.localStorage.setItem('opt', JSON.stringify(opt))
        // 请求数据
        shouHousesMap(item.value).then(({ body }) => {
          window.localStorage.setItem('label-list', JSON.stringify(body))
          body.forEach((item) => {
            const str = `<div><p>${item.label}</p><p>${item.count}套</p><div/>`
            const label = new MyMap.Label()
            // 设置文本标注样式
            label.setStyle({
              position: 'absolute',
              display: 'inline-block',
              width: '70px',
              height: '70px',
              borderRadius: '50%',
              fontSize: '14px',
              background: '#23bb77',
              textAlign: 'center',
              color: '#ffffff',
              border: '2px solid hsla(0,0%,100%,.8)',
              lineHeight: '2',
              cursor: 'pointer'
            })
            label.setContent(str)
            // 设置标标注地理位置
            const opt = new MyMap.Point(
              item.coord.longitude,
              item.coord.latitude
            )
            label.setPosition(opt)
            // 绑定点击事件
            label.addEventListener('click', () => {
              const num = map.getZoom() + 2
              map.centerAndZoom(opt, num)
              map.clearOverlays()
              window.localStorage.setItem('opt', JSON.stringify(opt))
              shouHousesMap(item.value).then(({ body }) => {
                window.localStorage.setItem('label-list', JSON.stringify(body))
              })
            })
            map.addOverlay(label)
          })
        })
      })
      map.addOverlay(label)
    })
  }
}
</script>

<style lang="less" scoped>
#app {
  width: 100%;
  height: 100vh;

  ::v-deep .title {
    position: absolute;
    width: 100%;
    color: #fff;
    background-color: #21b97a;
  }
  #container {
    width: 100%;
    height: 100%;
  }
}
</style>
